<template>
	<view class="bigview">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText "></block>
			<block slot="content">企业详情</block>
		</cu-custom>
		<view class="imgbox">
			<image class="img" src="../../static/compang_deatil.png" mode="aspectFill"></image>
		</view>

		<view class="avatar">
			<view>
				<view class="cu-avatar lg  margin-left "><image :src="logo" mode="aspectFill" class="size_img"></image></view>
			</view>
			<view>
				<view class="pad_one">
					<text class="word margin-left">{{company_name}}</text>
				</view>

				<view class="word_two margin-left">
					<view >
						<text class="r_pad" v-for="(item,index) in tages_list" :key='index'>{{item}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="border-bottom: 1rpx solid rgba(179, 179, 179,0.001) ;">
			<scroll-view scroll-x class="bg-white nav margin-top scroll" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in message" :key="index" @tap="tabSelect"
				 :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="contain" v-if="TabCur==0" v-for="(item,index) in job_list" :key='index'>

			<view class="incontain_one pad_two" >
				<text class="txt_one " >{{item.job_name}}</text>
			</view>

			<view class="incontain_two pad_two"  >
				<view class="pad_four" style="display: flex;" >

					<view class="word_three" style="display: flex;">
						<view class="iconfont icon-dizhi ic" ></view>{{item.city}}
					</view>
				</view>

				<view class="pad_four" style="display: flex;">

					<view class="pad_five word_three" style="display: flex;">
						<view class="iconfont icon-gongzuo ic"></view>{{item.workage}}
					</view>
				</view>

				<view class="pad_four" style="display: flex;">

					<view class="pad_five word_three" style="display: flex;">
						<view class="iconfont icon-xueli ic_one"></view>{{item.qualifications}}
					</view>
				</view>
			</view>

			<view style="height: 150rpx;"></view>
		</view>
		<!-- 企业详情 -->
		<view v-if="TabCur==1" style="background-color: #FFFFFF;" >
			<view class="form1">
				<view class="row" >
						<view class="sch_name">企业名称</view>
						<view class="right_name">{{company_name}}</view>		
					
				</view>
			</view>
			
			<view class="form1">
				<view class="row" >
						<view class="sch_name">企业地址</view>
						<view class="right_name">{{address}}</view>
					
				</view>
			</view>
			
			<view class="form1">
				<view class="row" >
					<view class="sch_name">联系电话</view>
					<view class="right_name">{{phone_info}}</view>
					
				</view>
			</view>
			
			<view class="form1">
				<view class="row" >
						<view class="sch_name">联系人</view>
						<view class="right_name">{{contacts_info}}</view>	
				</view>
			</view>
			<view style="background-color: #FFFFFF;">
					<view class="sch_name" style="padding-top: 25rpx;">企业标签</view>
					<view class="sm_text "  >
						<view class='bgcolor' v-for="(item,index) in tages_list" :key='index'>{{item}}</view>
					</view>
				<view style="height: 500rpx;background-color: #FFFFFF;"></view>
			</view>
		</view>
			<view class="button1 foot" v-if="identity !=='student' && token ==''">
				<button class=".but_apply" @tap="showModal"  data-target="bottomModal">申请合作</button>
			</view>
	
		
		<view class="button1 foot " v-if="status >= 1">
			<button class=".but_apply state" >{{msg}}</button>
		</view>
		<!-- 底部弹框 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog" style="height: 700rpx;border-radius: 40rpx 40rpx 0 0;background-color: #FFFFFF;">

				<view class="bar" style="text-align: center;">
					<text class="text-black" style="text-align: center;font-weight: bold;">申请合作</text>
					<view class="iconfont icon-guanbi text-gray " style="right: 35rpx;position: absolute;top: 35rpx;" @tap="hideModal()"></view>
				</view>
				<view class="padding-xl" style="text-align: center;width: 100%;">
					<view class="input">
						<view class="text_b">联系人:</view>
						<view class="text_c"> <input class="input_a" placeholder="请输入您的姓名" style="" v-model="contacts"></input> </view>
					</view>
					<view class="b_input">
						<view class="text_b">手机号:</view>
						<view class="text_c"> <input class="input_a" placeholder="请输入您的手机号" style="" v-model="phone"></input> </view>
					</view>
					<view class="on_button">
						<button class="button_a" @click="apply_cop()">立即申请</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				message: [{
					name: '实训岗位'
				}, {
					name: '企业信息 '
				}],
				modalName: null,
				TabCur: 0,
				identity:'',
				scrollLeft: 0,
				contacts_info: '',
				school_id:'',
				contacts: '',
				phone_info: '',
				phone: '',
				company_id: 1,
				url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
				msg:'',
				status:'',
				address:'',
				job_list:[],
				page:1,
				pagesize:'',
				list:[],
				is_login:false,
				token: '',
				company_name:'',
				logo:'',
				tages_list:[]
			}

		},
		onLoad(option) {
			appLogin((user_info) => {
				console.log(user_info)
				this.token = uni.getStorageSync('token')
				this.identity = user_info.identity
				this.company_id = option.company_id
				this.coopraion_info()
				this.getjob_list()
				this.getlist()
				this.getinfo()
				// this.gettoken()
				console.log(this.identity)
			})
		},
		methods: {
			// gettoken() {
			// 	this.token = uni.getStorageSync('token')
			// 	console.log(this.token)
			// 	if (this.token) {
					
			// 	} else {
			// 		this.is_login = true
			// 	}
			
			// },
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			//获取合作公司信息
			coopraion_info(){
				httpGet({
					url:"/api/school/cooperate_company_info",
					data:{
						company_id:this.company_id,
					},
				}).then((res) => {
					console.log(res)
					this.msg = res.msg
					this.status = res.result
				})	
			},	
			// 获取学校信息
			getinfo() {
				httpGet({
					url: '/api/school/info',
					data: {
						school_id: this.school_id
					}
				}).then((res) => {
					console.log('显示信息')
					console.log(res)
					this.contacts = res.result.contacts
					this.phone = res.result.phone
				})
			},
			
			//获取合作公司列表
			apply_cop() {
				httpGet({
					url:"/api/school/cooperate_company",
					data:{
						company_id:this.company_id,
						contacts:this.contacts,
						phone:this.phone
					},
				}).then((res) => {
					console.log(res)	
				})
				this.hideModal()					
			},
			// 获取职位列表
			getjob_list(){
				httpGet({
					url:"/api/company/job_list",
					data:{
						company_id:this.company_id,
						status:this.status,
						page:this.page,
						pagesize:this.pagesize
					},
				}).then((res) => {
					console.log('职位列表')
					console.log(res)
					this.job_list = res.result.list	
				})	
			},
			//获取公司信息
			getlist() {
				httpGet({
					url: '/api/company/info',
					data: {
					company_id:this.company_id,
					}
				}).then(res => {
					console.log('公司信息')
					console.log(res)
					// this.list = res.result
					this.company_name = res.result.company_name
					this.logo = res.result.logo 
					this.tages_list = res.result.tags
					this.address = res.result.address
					this.contacts_info = res.result.contacts
					this.phone_info = res.result.phone
				})
			},
		}
	}
</script>

<style>
	/* 企业介绍样式 */
	.form1{
		border-bottom: rgb(238,238,238) 1rpx solid;
	}
	.row{
		display: flex;
		height: 95rpx;
		background-color: #FFFFFF;
		line-height: 95rpx;
		margin-bottom: 3rpx;
	}
	.sch_name{
		font-size: 30rpx;
		color: rgb(102,102,102);
		margin-left: 30rpx;
	}
	.right_name{
		position: absolute;
		right: 52rpx;
		font-size: 26rpx;
	}
	.icou_right{
		position: absolute;
		right: 20rpx;
	}
	.sm_text{
		display: flex;
		flex-flow: row wrap;
		padding-left: 30rpx;
		/* margin-top: 30rpx; */
	}
	.right_box {
		color: #FFFFFF;
		font-size: 25rpx;
		position: absolute;
		right: 30rpx;
		margin-top: 48rpx;
	}
	.bgcolor{
		margin-top: 30rpx;
		background-color: rgb(117,157,249);
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		font-size: 25rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		padding: 0rpx 15rpx 0rpx 15rpx ;
		margin-right: 20rpx;
	}
	/* 企业列表样式 */
	.pad {
		margin-left: 20rpx;
	}
	
	.r_pad {
		padding-right: 20rpx;
	}
	
	.pad_one {
		margin-top: 20rpx;
	}

	.pad_two {
		margin-left: 32rpx;
	}

	.pad_four {
		margin-top: 23rpx;
	}

	.pad_five {
		margin-left: 32rpx;
	}

	.margin-left {
		margin-left: 55rpx;
	}

	.contain {
		padding-bottom: 150rpx;
		border-bottom: 1rpx solid rgba(179, 179, 179, 0.1);
		height: 170rpx;
		background-color: #FFFFFF;

	}

	.incontain_one {
		display: flex;
		font-size: 32rpx;
	}

	.incontain_two {
		display: flex;
		color: rgb(179, 179, 179);
	}

	.incontain_three {
		position: absolute;
		right: 0;
		margin-top: 64rpx;


	}

	.cu-btn {
		background-color: #FFFFFF;
	}

	.img {
		width: 750rpx;
		height: 280rpx;

	}

	.ic {
		padding-top: 5rpx;
		font-size: 24rpx;
		margin-right: 5rpx;
	}

	.ic_one {
		margin-right: 5rpx;
		padding-top: 5rpx;
		font-size: 30rpx;
	}

	.big {
		border: 1rpx solid;
	}

	.avatar {
		margin-top: 0;
		height: 200rpx;
		background-color: #FFFFFF;
	}

	.cu-avatar {
		width: 106rpx;
		height: 106rpx;
		background-color: rgb(11, 162, 154);
		border-radius: 10rpx;
		font-size: 14rpx;
		margin-top: -62rpx;
	}

	.word {
		font-weight: bold;
		font-size: 36rpx;
	}

	.word_two {
		margin-top: 24rpx;
		font-size: 26rpx;
		color: rgb(112, 112, 112);
	}

	.word_three {
		font-size: 22rpx;
	}

	.but {
		background-color: #FFFFFF;
		color: #007AFF;
		margin-right: 30rpx;
		border: 0.5rpx solid rgb(59, 115, 246);
	}

	.but3 {
		padding: 14rpx 20rpx 14rpx 20rpx;
		margin-bottom: 50rpx;
		display: inline;
		right: 54rpx;
		height: 50rpx;
		width: 150rpx;
		border: 0.5rpx solid rgb(59, 115, 246);
		background-color: #FFFFFF;
		font-size: 24rpx;
		color: #007AFF;
	}

	.txt_one {
		margin-top: 48rpx;
	}

	.scroll {
		margin-top: 14rpx;
	}

	.button1 {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		height: 120rpx;
		border-top: rgba(179, 179, 179, 0.3) 1rpx solid;
		background-color: #FFFFFF;
	}

	.but_apply {
		width: 695rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 20rpx;
		line-height: 80rpx;
		background-color: #0081FF;
		border-radius: 45rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	/* 弹框样式 */
	.text_b {
		padding-left: 20rpx;
		text-align: left;
		font-size: 34rpx;
		line-height: 106rpx;
		width: 30%;
	}

	.text_c {

		line-height: 106rpx;
		width: 75%;
	}

	.input {
		background-color: #FFFFFF;
		border: 1rpx solid rgba(182, 182, 182, 0.5);
		display: flex;
		height: 106rpx;
		width: 100%;
		border-radius: 10rpx;
	}

	.b_input {
		background-color: #FFFFFF;
		border: 1rpx solid rgba(182, 182, 182, 0.5);
		display: flex;
		margin-top: 40rpx;
		width: 100%;
		height: 106rpx;
		border-radius: 10rpx;
	}

	.input_a {

		text-align: left;
		height: 102rpx;
	}

	.icon {
		color: #666666;
		font-size: 40rpx;
		text-align: right;
		padding-right: 34rpx;
		line-height: 175rpx
	}

	.btn {

		margin-left: 38rpx;
		width: 100%;
		text-align: center;
	}

	.on_button {
		text-align: center;
		margin-top: 108rpx;
	}

	.button {
		width: 90%;
		margin-bottom: 100rpx;
		border-radius: 400rpx;
		position: fixed;
		bottom: 0;
		background-color: #3085ff;
		color: #FFFFFF;
	}

	.button_a {
		width: 100%;
		border-radius: 20rpx;
		background-color: #3085ff;
		color: #FFFFFF;
	}

	.bar {
		padding-top: 36rpx;
		font-size: 30rpx;
		background-color: #FFFFFF;
		text-align: center;
		width: 100%;
		height: 124rpx;

	}
	.size_img{
		height: 105rpx;
		border-radius: 10rpx;
	}
	.state{
		/* border: #000000 2rppx solid; */
	}
</style>
